<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>电表充值</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<style type="text/css">
			#app {
				display: none;
			}
			
			.modal-body {
				max-height: 4.0rem;
				overflow-y: auto;
			}
			
			#myModal,
			#myModal1 {
				width: 90%;
				height: 77%;
				overflow: auto;
				margin: auto;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<ul v-if="main">
				<li>
					<p class="tips">
						注：如需购电请在购电金额上填写倍率的整数倍金额						
					</p>
				</li>
				<li>
					<p class="tips">						
						注：如有疑问请致电客服：<a>13892089807</a>
					</p>
				</li>
				<!-- <li>
					<p class="tips">						
						注：如有疑问请致电客服：13892089807
					</p>
				</li> -->
							<!-- <a href="tel:0147-88469258"></a> -->
				<li>
					<span>区域</span>
					<s v-text="form.area_addre"></s>
				</li>
				<li>
					<span>房间号</span>
					<s v-text="form.room"></s>
				</li>
				<li>
					<span>电表表号</span>
					<s v-text="form.sb_bh"></s>
				</li>
				<li>
					<span>用电状态</span>
					<s v-text="form.type"></s>
				</li>
				<li>
					<span>剩余金额</span>
					<s v-text="form.balance+'元'"></s>
				</li>
				<li>
					<span>当前倍率</span>
					<s v-text="form.rate+'倍'"></s>
				</li>
				<li>
					<span>充电次数</span>
					<s v-text="form.times+'次'"></s>
				</li>
				<li>
					<span>购电金额</span>
					<s>
						<input v-model="form.money"	 type="number" name="" id="rate" value="" />						
						元
					</s>
				</li>
			</ul>
			<input v-if="butt" @click="goto_pay()" type="button" id="sub" value="立即充值" />
			<!-- 模态框（Modal）选择房间 -->
			<div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->
							<h4 class="modal-title" id="myModalLabel">选择房间</h4>
						</div>
						<div class="modal-body">
							<div class="radio" v-for="item in room_radio" @click.prevent="chose_room(item.rommid,item.buildname,item.rommcode)">
								<label>
									<input type="radio" name="optionsRadios" id="item.rommid" :value="item.rommid" > 
									{{item.buildname+item.rommcode}}
								</label>
							</div>

						</div>
						<!--<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary">提交更改</button>
						</div>-->
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
			<!-- 模态框（Modal）选择表号-->
			<div class="modal fade" id="myModal1" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->
							<h4 class="modal-title" id="myModalLabel">选择表号</h4>
						</div>
						<div class="modal-body">
							<div class="radio" v-for="item in biao_radio" @click.prevent="chose_biao(item.equipsid,item.instadr+'/'+item.watchno,item.watchstate)">
								<label>
									<input type="radio" name="optionsRadios" id="item.equipsid" :value="item.equipsid" > 
									{{item.instadr+'/'+item.watchno}}
								</label>
							</div>

						</div>
						<!--<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-primary">提交更改</button>
						</div>-->
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>

			<div id="YWaitDialog">
				<p>
					请等待，正在查询数据 <img src="../images/loding.gif" />
				</p>
			</div>
		</div>
	</body>

</html>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" lang="scss">
	#YWaitDialog {
		background-color: #fff;
		position: absolute;
		margin: auto;
		top: 0px;
		left: 0;
		display: none;
		height: 100%;
		width: 100%;
	}
	
	#YWaitDialog p {
		height: 50px;
		width: 100%;
		position: absolute;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		vertical-align: central;
	}
	
	body,
	html {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	/*[v-cloak] {
		display: none
	}*/
	
	.checkbox,
	.radio {
		padding: 5px;
	}
	
	.checkbox label,
	.radio label {
		min-height: 24px;
		font: 16px/24px "";
	}
	/*.modal {
		top: 20%;
	}*/
	
	#app {
		background: #f8f8f8;
		width: 100%;
		height: 100%;
		/*display: none;*/
	}
	
	#app ul {
		background: #FFFFFF;
		border-top: 0.22rem solid #F8F8F8;
	}
	
	#app ul li {
		height: 40px;
		border-bottom: 1px solid #F8F8F8;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	
	#app ul li .tips {
		width: 100%;
		font: 12px/40px "";
		text-align: center;
		color: #21b699;
	}
	
	#app ul li s {
		font: 14px/40px "";
		text-align: right;
		color: #21b699;
		margin-right: 0.34rem;
		display: block;
		width: 72%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	#app ul li span {
		font: 14px/40px "";
		text-align: left;
		color: #474747;
		margin-left: 0.34rem;
		width: 28%;
	}
	
	#app ul li input {
		font: 14px/36px "";
		height: 36px;
		text-align: center;
		color: #474747;
		border: none;
		width: 2.1rem;
		border-bottom: 1px solid #22b599;
		outline: none;
		-webkit-appearance: none;
		border-radius: 0;
		/*border-left: 1px solid #FFFFFF;
		border-right: 1px solid #FFFFFF;*/
	}
	
	#sub {
		width: 5.7rem;
		display: block;
		outline: none;
		border: none;
		margin: 0 auto;
		font: 16px/40px "";
		background: #22b599;
		color: #ffffff;
		margin-top: 1.5rem;
		border-radius: 0.35rem;
	}
	
	#sel {
		font: 16px/24px "";
		height: 24px;
		text-align: center;
		color: #474747;
		border: 1px solid #fff;
		width: 3.1rem;
		outline: none;
		padding: 0;
		box-shadow: none;
		/*margin-top: 0.06rem;*/
		text-align: center;
	}
	
	.checkbox+.checkbox,
	.radio+.radio {
		margin-top: -5px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.open>.btn {
		background-color: #000!important;
	}
</style>
<script>
	new Vue({
		el: '#app',
		data: {
			main: false,
			butt: false,
			urlr: "",
			aaa: "",
			userid: "",
			areaid: "",
			token: "",
			goodsid: "",
			form: {
				area_addre: "",
				room: "",
				sb_bh: "",
				money: "",
			},
			room_radio: [],
			biao_radio: [],
			data_ajax: {

			}
		},
		mounted: function() {
			var that = this;
			var urlr = getUrl();
			that.urlr = urlr;
			that.userid = getUrlParam('userid');
			that.areaid = getUrlParam('areaid');
			that.token = getUrlParam('token');
			that.goodsid = getUrlParam('goodsid');
			if(that.userid == null || that.areaid == null || that.token == null || that.goodsid == null) {
				alert("请重新登录")
			} else {
				var data_pri = {
					userid: that.userid,
					areaid: that.areaid,
				}
				var requestString = {
					sign: that.token,
					userId: that.userid,
					requestString: JSON.stringify(data_pri)
				};
				console.log(requestString)
				console.log(JSON.stringify(requestString))
				var data = JSON.stringify(requestString);
				that.selectRommList(data)
			}

		},
		created: function() {

		},
		methods: {
			//加载房子
			selectRommList: function(data) {
				var that = this;
				$("#YWaitDialog").show();
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: this.urlr + "/verify/order/selectRommList",
					data: data,
					async: true,
					dataType: "json",

					success: function(msg) {
						$("#YWaitDialog").hide();
						if(msg.code == 200) {
							that.room_radio = JSON.parse(msg.returnString);
							//							console.log(that.room_radio);
							//							$('#myModal').modal('show');
							if(that.room_radio == "") {
								alert("暂无可匹配的房间")
							} else {
								console.log(that.room_radio);
								$('#myModal').modal('show');
								$("#app").show();
							}
						} else {
							alert(msg.disp)
						}
					},
					error: function() {
						$("#YWaitDialog").hide();
						alert("获取信息失败");
					}
				});

			},

			//加载表号
			chose_room: function(data, area, room) {
				var that = this;
				that.form.area_addre = area;
				that.form.room = room;
				that.form.roomid = data;
				$("#YWaitDialog").show();
				//				window.event ? window.event.cancelBubble = true : e.stopPropagation();
				console.log(data)
				$('#myModal').modal('hide')
				var data_pri = {
					roomid: data,
					//1电  2水  3燃气   表具类型
					rechkind: 1,
				}
				var requestString = {
					sign: that.token,
					userId: that.userid,
					requestString: JSON.stringify(data_pri)
				};
				console.log(requestString)
				console.log(JSON.stringify(requestString))
				var data = JSON.stringify(requestString);
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: this.urlr + "/verify/order/selectWatchForRoom",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						$("#YWaitDialog").hide();
						console.log(msg);
						if(msg.code == 200) {
							that.biao_radio = JSON.parse(msg.returnString)
							if(that.biao_radio == "") {
								alert("暂无可匹配的表号")
							} else {
								console.log(that.biao_radio);
								$('#myModal1').modal('show');
							}

						} else {
							alert(msg.disp)
						}
					},
					error: function() {
						$("#YWaitDialog").hide();
						alert("获取信息失败");
					}
				});
			},
			//chose_biao
			chose_biao: function(data, aaa, state) {
				var that = this;
				$("#YWaitDialog").show();
				$('#myModal1').modal('hide');
				if(state == 1) {
					that.form.type = "正常"
				} else if(state == -1) {
					that.form.type = "暂停使用"
				} else {
					that.form.type = "2已故障"
				}
				console.log(aaa)
				that.form.sb_bh = aaa;
				that.form.meterid = data;
				//				$("#YWaitDialog").show();
				var data_pri = {
					equipsid: data,
					//1电  2水  3燃气   表具类型
					//					watchkind: 1,
				}
				var requestString = {
					sign: this.token,
					userId: this.userid,
					requestString: JSON.stringify(data_pri)
				};
				console.log(requestString)
				console.log(JSON.stringify(requestString))
				var data = JSON.stringify(requestString);

				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: this.urlr + "/verify/order/selectWatchInfo",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						$("#YWaitDialog").hide();
						console.log(msg);
						if(msg.code == 200) {
							var data = JSON.parse(msg.returnString)
							that.form.times = data.times;
							that.form.balance = data.balance;
							that.form.rate = data.rate;
							that.form.meterID = data.meterID;

							that.main = true;
							that.butt = true;

							//							
						} else {
							alert(msg.disp)
						}
					},
					error: function() {
						$("#YWaitDialog").hide();
						alert("获取信息失败");
					}
				});

			},
			//水电费下单
			goto_pay: function() {
				var that = this;
				var money = that.form.money;
				var rate = that.form.rate;
				if(money == "" || money < 5) {
					alert("请输入购买金额，最少为5元");
					return false;
				}
				if(money % rate != 0) {
					alert("购电金额应是倍率的整数倍")
				} else {
					$("#YWaitDialog").show();
					var data = {
						roomid: that.form.roomid,
						amount: that.form.money,
						paymentamt: that.form.money,
						equipsid: that.form.meterid,
						userid: that.userid,
						goodsid: that.goodsid,
						orderinfotype: 1
					}
					data = JSON.stringify(data);
					this.open_az(data);
				}
			},
			//调取安卓
			open_az: function(data) {
				console.log(data);
				//判断操作系统
				var u = navigator.userAgent,
					app = navigator.appVersion;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				//	           ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端         
				if(isAndroid) {
					//这个是安卓操作系统
					//js调用app方法  getUserDataBayKeys此函数名必须与app方法名一致。	window.Android是调用Android方法。
					console.log(data)
					window.Android.doPay(data);
					$("#YWaitDialog").hide();
				}
				if(isIOS) {　　　　 //这个是ios操作系统
					//			window.webkit.messageHandlers.openScanCode();
					//send message to native
					window.webkit.messageHandlers.iosCall.postMessage({
						parameter: data, //传递给ios的参数
						callBackResult: "payResult" //ios方法回调名字
					});
					$("#YWaitDialog").hide();
				}
			},
		}
	})
</script>
<script type="text/javascript">
	//app回调过来的函数   函数名必须与app方法名一致。
	function payResult(data) {
		var data = JSON.parse(data);
		if(data.state == 200) {
			//			alert("支付成功");
			$("#YWaitDialog").hide();
		} else {
			//			alert(data.disp);
			$("#YWaitDialog").hide();
		}

	}
</script>